﻿<local:LayoutAwarePage
    x:Class="yavc.Metro.Pages.ViewDevicePage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:yavc.Metro.Pages"
    xmlns:con="using:yavc.Metro.Controls"
    xmlns:conv="using:yavc.Metro.Converters" x:Name="theDevPage">
    <Page.Resources>
        <conv:ColorBooleanConverter x:Name="siBackground" 
                                    TrueColor="{StaticResource MetroAccentBrush}" 
                                    DefaultColor="Transparent"
                                    FalseColor="Transparent" />

        <conv:ScaleValue x:Key="scale" x:Name="theScale" Value="{Binding Value, Source={StaticResource BaseValue}}" />

        <conv:ScaleValue x:Key="scaleSmallZone" x:Name="theScaleSmallZone" />

        <conv:ScaleConverter x:Key="smallZoneWidthConv" BaseValue="100" />
        <conv:ScaleConverter x:Key="textConv" BaseValue="0.8" />

        <DataTemplate x:Key="SelectableImageTemplate">
            <Button Margin="0" Click="Select_Click" Tag="{Binding}" Height="130" Width="110"
                    Style="{StaticResource MetroClearButtonStyle}" VerticalAlignment="Top" VerticalContentAlignment="Top"
                    Background="{Binding IsSelected, Converter={StaticResource siBackground}}">
                <StackPanel>
                    <Image Source="{Binding ImageUri, Converter={StaticResource imgConv}}" Height="48" Width="48" />
                    <TextBlock 
                        Text="{Binding DisplayName}" TextWrapping="Wrap" Margin="0" 
                        FontSize="{Binding 
                        Source={StaticResource scale}, Path=Value, 
                        Converter={StaticResource convMetroTextSmallFontSize}, ConverterParameter=1.1}" />
                </StackPanel>
            </Button>
        </DataTemplate>

        <DataTemplate x:Key="dspDT">
            <Button Margin="0" Click="Select_Click" Tag="{Binding}" Padding="10" 
                                Style="{StaticResource MetroClearButtonStyle}"
                                Background="{Binding IsSelected, Converter={StaticResource siBackground}}">
                <TextBlock Text="{Binding DisplayName}" 
                                   FontSize="{Binding ElementName=theScale, Path=Value, Converter={StaticResource convMetroTextMediumFontSize}, ConverterParameter=1.3}" />
            </Button>
        </DataTemplate>

        <DataTemplate x:Key="zoneDT">
            <Button Click="Select_Click" 
                    Background="{Binding IsActiveZone, Converter={StaticResource siBackground}}"
                    HorizontalContentAlignment="Center"
                    Width="{Binding Source={StaticResource scaleSmallZone}, Path=Value, Converter={StaticResource smallZoneWidthConv}}"
                    Style="{StaticResource MetroClearButtonStyle}">
                <StackPanel Orientation="Vertical">
                    <Border BorderBrush="{StaticResource MetroForegroundBrush}" BorderThickness="0,0,0,2">
                        <TextBlock 
                            HorizontalAlignment="Center"
                            FontSize="{Binding Source={StaticResource scale}, Path=Value, 
                            Converter={StaticResource convMetroTextLargeFontSize}}" Text="{Binding ZoneTitle}" />
                    </Border>
                    <con:ZoneControl 
                        ImageSize="48"
                        LargeFontSize="{Binding Source={StaticResource scale}, Path=Value, 
                        Converter={StaticResource convMetroTextLargeFontSize}, ConverterParameter=0.6}"
                        MediumFontSize="{Binding Source={StaticResource scale}, Path=Value, 
                        Converter={StaticResource convMetroTextMediumFontSize}, ConverterParameter=0.7}" />
                </StackPanel>
            </Button>
        </DataTemplate>

        <Style TargetType="ItemsControl" x:Key="icWrapStyle">
            <Setter Property="Margin" Value="5" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <WrapGrid Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="svStyle" TargetType="ScrollViewer">
            <Setter Property="Margin" Value="0,10" />
            <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
            <Setter Property="ZoomMode" Value="Disabled" />
        </Style>
        
        <Style TargetType="con:AnimatedContentControl">
            <Setter Property="Grid.Row" Value="2" />
            <Setter Property="Grid.Column" Value="1" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
        </Style>
    </Page.Resources>

    <Grid x:Name="theGrid" Background="{StaticResource MetroBackgroundBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <!-- Header Control -->
            <RowDefinition Height="Auto" />
            <!-- Zone Info -->
            <RowDefinition Height="*" />
            <!-- Main Content -->
            <RowDefinition Height="Auto" />
            <!-- Play Control -->
            <RowDefinition Height="Auto" />
            <!-- Volume Control-->
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <!-- Input / Zone / DSP / Scene -->
            <ColumnDefinition Width="*" />
            <!-- Main Content -->
        </Grid.ColumnDefinitions>

        <con:HeaderControl HeaderText="{Binding FriendlyName}" 
                           HeaderFontSize="{Binding ElementName=theScale, Path=Value, Converter={StaticResource convMetroTitleFontSize}}"
                           Grid.ColumnSpan="3" />

        <con:BackControl VerticalAlignment="Top" />

        <Button Click="Refresh_Click" Style="{StaticResource MetroClearButtonStyle}" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top">
            <Canvas Width="48" Height="48" UseLayoutRounding="False">
                <Path Width="22" Height="26" Canvas.Left="13" Canvas.Top="11" Stretch="Fill" 
                      Fill="{StaticResource MetroForegroundBrush}" 
                      Data="F1 M 24,13C 27.1521,13 29.9945,14.3258 32,16.4501L 32,11L 35,14L 35,22L 27,22L 24,19L 29.5903,19C 28.217,17.4656 26.2212,16.5 24,16.5C 20.1969,16.5 17.055,19.3306 16.5661,23L 13.0448,23C 13.5501,17.3935 18.262,13 24,13 Z M 24,31.5C 27.8031,31.5 30.945,28.6694 31.4339,25L 34.9552,25C 34.4499,30.6065 29.738,35 24,35C 20.8479,35 18.0055,33.6742 16,31.5499L 16,37L 13,34L 13,26L 21,26L 24,29L 18.4097,29C 19.783,30.5344 21.7787,31.5 24,31.5 Z "/>
            </Canvas>
        </Button>

        <Border Grid.Row="1" Grid.ColumnSpan="2" Padding="5" BorderBrush="{StaticResource MetroAccentBrush}" BorderThickness="0,0,0,3">
            <Grid DataContext="{Binding SelectedZone}" >
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <con:ZoneControl x:Name="zcActive"
                    ImageSize="60" VerticalAlignment="Center" HorizontalAlignment="Left"
                    LargeFontSize="{Binding ElementName=theScale, Path=Value, Converter={StaticResource convMetroTextLargeFontSize}}"
                    MediumFontSize="{Binding ElementName=theScale, Path=Value, Converter={StaticResource convMetroTextMediumFontSize}}" />

                <TextBlock Text="{Binding ZoneTitle}" HorizontalAlignment="Center" VerticalAlignment="Center" 
                           FontSize="{Binding ElementName=theScale, Path=Value, Converter={StaticResource convMetroTitleFontSize}}" />
            </Grid>
        </Border>

        <con:SelectModeControl x:Name="smc" Grid.Row="2" />

        <con:AnimatedContentControl x:Name="accInputs">
            <ScrollViewer Style="{StaticResource svStyle}" Visibility="{Binding SelectionMode, Converter={StaticResource inputVis}}">
                <ItemsControl 
                    IsEnabled="{Binding SelectedZone.IsOn}"
                    ItemsSource="{Binding SelectedZone.Inputs}" 
                    ItemTemplate="{StaticResource SelectableImageTemplate}"
                    Style="{StaticResource icWrapStyle}" />
            </ScrollViewer>
        </con:AnimatedContentControl>

        <con:AnimatedContentControl x:Name="accScene">
            <ScrollViewer Style="{StaticResource svStyle}" Visibility="{Binding SelectionMode, Converter={StaticResource sceneVis}}">
                <ItemsControl
                    IsEnabled="{Binding SelectedZone.IsOn}"
                    ItemsSource="{Binding SelectedZone.Scenes}" 
                    ItemTemplate="{StaticResource SelectableImageTemplate}"
                    Style="{StaticResource icWrapStyle}" />
            </ScrollViewer>
        </con:AnimatedContentControl>

        <con:AnimatedContentControl x:Name="accDSP">
            <ScrollViewer Style="{StaticResource svStyle}" Visibility="{Binding SelectionMode, Converter={StaticResource dspVis}}">
                <ItemsControl IsEnabled="{Binding SelectedZone.IsOn}" ItemsSource="{Binding SelectedZone.DSPs}" ItemTemplate="{StaticResource dspDT}" />
            </ScrollViewer>
        </con:AnimatedContentControl>

        <con:AnimatedContentControl x:Name="accZone">
            <ScrollViewer Style="{StaticResource svStyle}" Visibility="{Binding SelectionMode, Converter={StaticResource zoneVis}}">
                <ItemsControl ItemsSource="{Binding Zones}" ItemTemplate="{StaticResource zoneDT}" />
            </ScrollViewer>
        </con:AnimatedContentControl>

        <con:AnimatedContentControl x:Name="accPlayInfo" Grid.Row="2" Grid.Column="1">
            <con:PlayInfoControl
                Visibility="{Binding SelectionMode, Converter={StaticResource playVis}}" 
                LargeFontSize="{Binding ElementName=theScale, Path=Value, Converter={StaticResource convMetroTextLargeFontSize}}"
                MediumFontSize="{Binding ElementName=theScale, Path=Value, Converter={StaticResource convMetroTextMediumFontSize}}" />
        </con:AnimatedContentControl>

        <con:PlayControl Grid.ColumnSpan="2" Grid.Row="3"
                         IsEnabled="{Binding SelectedZone.IsOn}"
                         FontSize="{Binding ElementName=theScale, Path=Value, Converter={StaticResource convMetroTextMediumFontSize}}"
                         Visibility="{Binding SelectedZone.CanViewPlayback, Converter={StaticResource truVis}}" Margin="5,0" />

        <con:VolumeControl Grid.Row="5" IsEnabled="{Binding IsOn}" Grid.ColumnSpan="2"
                           FontSize="{Binding ElementName=theScale, Path=Value,Converter={StaticResource convMetroTextSmallFontSize}}"
                           Margin="0,10"
                           DataContext="{Binding SelectedZone.Volume}" />

        <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Value" Storyboard.TargetName="theScale" 
                                         To="{Binding Source={StaticResource DefaultFullScreenLandscapeScale}}" 
                                         EnableDependentAnimation="True"
                                         Duration="0:0:0.25" />
                        <DoubleAnimation Storyboard.TargetProperty="Value" Storyboard.TargetName="theScaleSmallZone" 
                                         To="4" 
                                         EnableDependentAnimation="True"
                                         Duration="0:0:0.25" />
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="smc" Storyboard.TargetProperty="(Grid.RowSpan)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Filled" />
                <VisualState x:Name="FullScreenPortrait" />
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Value" Storyboard.TargetName="theScale" 
                                         To="3.75" 
                                         EnableDependentAnimation="True"
                                         Duration="0:0:0.25" />
                        <DoubleAnimation Storyboard.TargetProperty="Value" Storyboard.TargetName="theScaleSmallZone" 
                                         To="2.25" 
                                         EnableDependentAnimation="True"
                                         Duration="0:0:0.25" />
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="smc" Storyboard.TargetProperty="(Grid.RowSpan)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="zcActive" Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="zcActive" Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Center" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>

    <local:LayoutAwarePage.BottomAppBar>
        <AppBar>
            <StackPanel Orientation="Horizontal">
                <Button Style="{StaticResource HomeAppBarButtonStyle}" Click="Home_Click" />
                <Button Style="{StaticResource PinAppBarButtonStyle}" Click="PinDevice_Click" AutomationProperties.Name="Pin Device" />
                <Button Style="{StaticResource PinAppBarButtonStyle}" Click="PinSelectedZone_Click" AutomationProperties.Name="Pin Selected Zone" />
            </StackPanel>
        </AppBar>
    </local:LayoutAwarePage.BottomAppBar>
</local:LayoutAwarePage>